<template lang="pug">
  .design-area
    el-tabs.w-100.h-100.design-tab(type="border-card" tab-position="top" :editable="true" @edit="handleTabsEdit" v-model="tabActiveName")
      el-tab-pane(v-for="(one,index) in initTemplateInfo.sortable" :name="one.name" :key="one.name")
        template(slot="label")
          tab-label(:one="one" :disabledName="'design-tab0'")
        design-area-form(v-if="tabActiveName===one.name" ref="designAreaForm" :quickCreatePage="quickCreatePage" :treeDragList="treeInitTemplateInfo.sortable[index]?treeInitTemplateInfo.sortable[index].list:[]" :globalStyle="globalStyle()" :customStyle="initTemplateInfo.globalCss.customStyle"   :designDeviceChoose="designDeviceChoose" :sortable="initTemplateInfo.sortable" :formInfo="one"  :properties="one.properties" :formRef="one.ref+'dragForm'")
</template>
<script>

import designAreaForm from './designAreaForm'
import _ from 'lodash'
import tabLabel from '../../../../common/components/tabLabel'

export default {
  components: { designAreaForm, tabLabel },
  props: ['initTemplateInfo', 'designDeviceChoose', 'treeInitTemplateInfo', 'quickCreatePage'],
  inject: ['operaTemplateRoot'],
  data() {
    return {
      state: {},
      // sortable: [],
      tabActiveName: 'design-tab0'
      // labelWidth: ''
    }
  },
  provide() {
    return {
      rootPage: this
    }
  },
  watch: {
    tabActiveName() {
      this.operaTemplateRoot.tabChange()
    }
  },
  methods: {
    setState(name, value) {
      this.$set(this.state, name, value)
    },
    // 全局样式
    globalStyle() {
      let globalCss = this.initTemplateInfo.globalCss
      if (globalCss) {
        let globalStyle = {}
        let labelWidth = ''
        let obj = { width: globalCss.pageWidth ? globalCss.pageWidth + 'px' : 'auto' }
        if (!globalCss.customTheme) {
          // 选中主题
          // globalCss.templateThemeId 主题id
          labelWidth = 80 + 'px' // 默认表单label宽度为80
          globalStyle = { }
        } else {
          globalStyle = {
            background: globalCss.backgroundColor,
            'border-color': globalCss.borderColor,
            color: globalCss.fontColor,
            'border-radius': globalCss.borderRadius + 'px'
          }
          labelWidth = (globalCss.labelWidth || 80) + 'px'
        }
        _.assign(obj, globalStyle)
        return { globalStyle: globalStyle, labelWidth: labelWidth }
      }
    },
    // 增加删除弹窗子页面
    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        let number
        if (this.initTemplateInfo.sortable.length > 0) {
          number = Number(this.initTemplateInfo.sortable[this.initTemplateInfo.sortable.length - 1].name.substring(10))
        } else {
          number = -1
        }
        let name = 'design-tab' + Number(number + 1)
        this.initTemplateInfo.sortable.push({
          label: 'New Tab',
          name: name,
          ref: name,
          list: [],
          properties: {},
          dialogPage: true
        })
        // 另一设备也增加一个子页面
        // this.treeInitTemplateInfo.sortable.push({
        //   label: 'New Tab',
        //   name: name,
        //   ref: name,
        //   list: [],
        //   properties: {},
        //   dialogPage: true
        // })

        this.tabActiveName = name
      }
      if (action === 'remove') {
        if (targetName === 'design-tab0') {
          this.$message({
            message: '首页不可删除',
            type: 'warning'
          })
          return false
        }
        this.$confirm('另一设备下配置的该子页面也将被删除，是否继续删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let tabs = this.initTemplateInfo.sortable
          let activeName = this.tabActiveName
          if (activeName === targetName) {
            tabs.forEach((item, index) => {
              if (item.name === targetName) {
                let naxtTab = tabs[index + 1] || tabs[index - 1]
                if (naxtTab) {
                  activeName = naxtTab.name
                } else {
                  activeName = ''
                }
              }
            })
          }
          this.initTemplateInfo.sortable = tabs.filter(item => item.name !== targetName)
          // 另一设备也删除该子页面
          _.remove(this.treeInitTemplateInfo.sortable, one => { return one.name === targetName })
          //   this.treeInitTemplateInfo.sortable = tabs.filter(item => item.name !== targetName)
          this.tabActiveName = activeName
        }).catch(() => {

        })
      }
    }
  },
  created() {
  }
}
</script>
<style lang="scss">
  .design-area {
    > .design-tab {
      box-sizing: border-box;
      > .el-tabs__header {
        height: 40px;
        box-sizing: border-box;
        .el-tabs__item{
          line-height: 40px;
          box-sizing: border-box;
          height:40px;
        }
      }
      > .el-tabs__content {
        height: calc(100% - 40px);
        width: 100%;
        box-sizing: border-box;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden;
        .el-tab-pane {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

</style>
<style lang="scss" scoped>
  .design-area {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
</style>
